<template>
  <view class="wrap">
		<view class="skeleton-container">
			<view class="header-container">
				<view class="portrait-container">
					<image class="img skeleton-fade" :src="item.userImage" />
				</view>
				<view class="right-container">
					<view class="user-name skeleton-fade">{{loadingItem.userName}}</view>
					<view class="time skeleton-fade">{{loadingItem.time}}</view>
				</view>
			</view>
			<view class="skeleton-content skeleton-fade">{{loadingItem.content}}</view>
			<view class="skeleton-content skeleton-fade">{{loadingItem.content}}</view>
			<view class="skeleton-content skeleton-fade" :style="{width: '50%'}">{{loadingItem.content}}</view>
			<view class="skeleton-image-container">
				<view class="img-item skeleton-fade" v-for="(item, index) in [1,2,3,4]" :key="index">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
    },
    props: {
      loading: {
        type: Boolean,
        default: false
      },
    },
		data() {
			return {
				loadingItem: {
					userImage: "",
					userName: "",
					time: "",
					title: '',
					content: "",
					images: [
						"",
						"",
						"",
						""
					]
				},
			}
		},
		mounted() {
			// setTimeout(() => {
			// 	this.loading = false;
			// }, 2000);
		},
		computed: {
      gapTop() {
        return 22 + 44 + 77 - 15;
      }
		},
		methods: {
		}
	}
</script>

<style scoped lang="less">
.wrap {
	padding: 0 30rpx;
	padding-top: 0;
  .skeleton-container {
    .skeleton-fade {
      width: 100%;
      height: 100%;
      background-color: #F0F0F0;
      animation-duration: 1.5s;
      animation-name: blink;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }

    @keyframes blink {
      0% {
        opacity: 1;
      }

      50% {
        opacity: 0.4;
      }

      100% {
        opacity: 1;
      }
    }
    //skeleton
    .header-container {
      margin-top: 30rpx;
      display: flex;
      align-items: center;
      .portrait-container {
        position: relative;
        margin-right: 16rpx;
        .img {
          min-width: 80rpx;
          width: 80rpx;
          height: 80rpx;
          border-radius: 40rpx;
        }
      }
      .right-container {
        display: flex;
        flex-direction: column;
        .user-name {
          font-family: PingFangSC-Semibold;
          font-weight: bold;
          font-size: 28rpx;
          width: 196rpx;
          height: 28rpx;
          color: #1A1A1A;
          line-height: 28rpx;
          text-overflow: ellipsis;
          max-width: calc(100vw - 60rpx - 80rpx - 20rpx);
          white-space: nowrap;
          overflow: hidden;
        }
        .time {
          margin-top: 8rpx;
          font-family: PingFangSC-Regular;
          font-size: 20rpx;
          width: 64rpx;
          height: 20rpx;
          color: #999999;
          line-height: 20rpx;
          display: inline-block;
        }
      }
    }
    .skeleton-content {
      height: 20rpx;
      margin-top: 12rpx;
    }
    .skeleton-img-item {
      width: calc((100vw - 60rpx) / 2 - 10rpx);
      height: calc((100vw - 60rpx) / 2 - 10rpx);
      border-radius: 8rpx;
    }
    .skeleton-image-container {
      margin-top: 30rpx;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      .img-item {
        width: calc((100vw - 60rpx) / 2 - 10rpx);
        height: calc((100vw - 60rpx) / 2 - 10rpx);
        border-radius: 8rpx;
        overflow: hidden;
        &:nth-child(1) {
          margin-right: 10rpx;
        }
        &:nth-child(3) {
          margin-top: 10rpx;
          margin-right: 10rpx;
        }
        &:nth-child(4) {
          margin-top: 10rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
}
</style>
